<template>
  <div
    style="
      background-color: #008080;
      border-radius: 10px;
      height: 120px;
      margin-top: 10px;
      color: white;
      padding: 20px;
    "
  >
    深层组件
    <h2 style="margin: 20px" class="">{{ testData }}</h2>
    <h2 style="margin: 20px">{{ middleInjectData }}</h2>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, inject } from "vue";

const otherData = ref("other");

//4、provide/inject
const testData = inject("deepData");
setTimeout(() => {
  testData.value = "深层组件修改属性值";
}, 5000);

const middleInjectData = inject("middleData");

onMounted(() => {});
</script>
